<template>
  <div class="doc">
  <top-nav class="nav2"></top-nav>
    <div class="content">
     <aside-main class="AsideMain"></aside-main>
           <MainContent class="MainContent">
        <router-link to="/">houme</router-link>
      </MainContent>
    </div>
  </div>
</template>

<script>
import AsideMain from "../components/components/Aside";
import MainContent from "../components/components/Main";
import TopNav from '../components/common/TopNav';
export default {
  name: "Document",
  data() {
    return {};
  },
  components: {
    AsideMain,
    MainContent,
    TopNav
  },
  methods: {},
  mounted() {},
};
</script>

<style scoped>
.doc {
  display: flex;
  height:100vh;
  flex-direction: column;
}

.content > .AsideMain {
  background: lightblue;
  flex: 1.5;
}
.content > .MainContent {
  background-color: lightgreen;
  flex: 9;
}
.content {
  flex-grow: 1;
  display: flex;
}
.nav2{
  position: fixed;
  top: 0;
  width: 100%;
}
</style>